﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="LineChart.ascx.cs" Inherits="NBA.UI.usercontrol.LineChart" %>
<script src="../resource/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../resource/js/highcharts/highcharts.js" type="text/javascript"></script>
<script src="../resource/js/highcharts/modules/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: '<% = divId %>',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: '<% = Title %>',
                    x: -20 //center
                },
                subtitle: {
                    text: '<% = SubTitle %>',
                    x: -20
                },
                xAxis: {
                    categories: ['<% =String.Join("','",xAxis) %>']
                },
                yAxis: {
                    title: {
                        text: '<% = yAxis.Title %>'
                    },
                    plotLines: [{
                        value: <% = yAxis.Line.Value %>,
                        width: <% = yAxis.Line.Width %>,
                        color: '<% = yAxis.Line.Color %>'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                        this.x + ': ' + this.y; //+ '°C';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [<% =DataString  %>]
            });
        });

    });
</script>
<div id="container" runat="server" style="min-width: 400px; height: 400px; margin: 0 auto"></div>